<template>
  <div>
    <el-form label-width="100px" style="margin-left: 100px">
      <el-form-item label="课程标题">
        <el-input
          style="width: 400px"
          placeholder="请输入课程标题"
          v-model="course_title"
        ></el-input>
      </el-form-item>

      <el-form-item label="课程章节">
        <el-input
          style="width: 100px"
          placeholder="小节"
          v-model="course_chapter"
          type="number"
          min="0"
        ></el-input>
      </el-form-item>

      <el-form-item label="课程类型">
        <el-radio-group size="medium" v-model="course_type">
          <el-radio border label="免费课"></el-radio>
          <el-radio border label="实战课"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="课程时长">
        <el-input
          style="width: 100px"
          placeholder="时长"
          v-model="course_hourse"
          type="number"
          min="0"
        ></el-input>
      </el-form-item>

      <el-form-item label="学习人数">
        <el-input
          style="width: 100px"
          placeholder="人数"
          v-model="course_studyNumber"
          type="number"
          min="0"
        ></el-input>
      </el-form-item>

      <el-form-item label="课程介绍">
        <el-input
          style="width: 400px"
          placeholder="请输入课程介绍"
          v-model="course_brief"
          type="textarea"
        ></el-input>
      </el-form-item>

      <el-form-item label="课程讲师Id">
        <el-input
          style="width: 400px"
          placeholder="请输入讲师ID"
          v-model="course_tutor"
          type="number"
        ></el-input>
      </el-form-item>

      <el-form-item label="课程图片上传">
        <el-upload
          class="upload-demo"
          drag
          name='uploadFile'
          action="http://localhost:8080/upload"
          multiple
          :on-success="pic"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input
          style="width: 400px"
          placeholder="请输入课程价格"
          v-model="course_fees"
          type="number"
        ></el-input>
      </el-form-item>

      <el-form-item label="讲师昵称">
        <el-input
          style="width: 400px"
          placeholder="请输入讲师昵称"
          v-model="course_teach"
        ></el-input>
      </el-form-item>

      <el-form-item label="视频上传">
        <el-upload
          class="upload-demo"
          ref="upload"
          action="http://localhost:8080/upload"
          name='uploadFile'
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false"
          :on-success="viedo"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload"
            >点击上传</el-button
          >
          <div slot="tip" class="el-upload__tip">
            只能上传MP4文件，且不超过500M
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item label="视频详情图片上传">
        <el-upload
          class="upload-demo"
          drag
          name='uploadFile'
          action="http://localhost:8080/upload"
          multiple
          :on-success="pic1"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-form>
        <el-button label="确认添加" style="margin-left: 200px; width: 150px" @click="addcourse"
          >确认添加</el-button
        >
      </el-form>
    </el-form>
  </div>
</template>

<script>
import qs from "qs"
export default {
  data(){
    return {
      course_title: "", //课程标题
      course_chapter: "", //课程章节
      course_type: "", //课程类型
      course_hourse: "", //课程时长
      course_studyNumber: "", //学习人数
      course_brief: "", //课程介绍
      course_tutor: "", //课程讲师id
      course_image: "", //课程图片
      course_fees: "", //课程价格
      course_teach: "", //讲师昵称
      course_video: "", //视频地址
      course_detail_img: "", //视频详情图片

      fileList:[{
        name:'',
        url:''
      }]
    };
  },
  methods: {
    // 课程图片上传值返回
     pic(res){
       console.log(res.urls[0])
      //  http://localhost:8080/fe9c0509-a098-446a-b882-dc4faebac450.png
      // /video/fe9c0509-a098-446a-b882-dc4faebac450.png
      let str="/video"+res.urls[0].slice(21)
      this.course_image=str
     },
    //视频详情图片上传返回
     pic1(res){
       console.log(res)
      let str="/video"+res.urls[0].slice(21)
       this.course_detail_img=str
     },
    //视频上传返回
    viedo(res){
      console.log(res)
      let str="./video"+res.urls[0].slice(21)
       this.course_video=str
    },


      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      // 点击添加课程信息，发送axios请求
      addcourse() {
          let url = `http://localhost:8080/index/addcourse`;
          const params={
              course_title:this.course_title,
              course_chapter:this.course_chapter,
              course_type:this.course_type,
              course_hourse:this.course_hourse,
              course_studyNumber:this.course_studyNumber,
              course_brief:this.course_brief,
              course_tutor:this.course_tutor,
              course_image:this.course_image,
              course_fees:this.course_fees,
              course_teach:this.course_teach,
              course_video:this.course_video,
              course_detail_img:this.course_detail_img
          }
            this.axios.post(url,qs.stringify(params)).then((res)=>{
              console.log(res)
                if(res.data.code==200){
                     this.$message({
                      message: '恭喜你，添加成功',
                      type: 'success'
                  });
                }
            })
        }
  }
}
</script>

<style lang="scss" scoped>
</style>